<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title><%= htmlWebpackPlugin.options.title %></title>
    </head>
    <body>
        <div id="main">
            <div class="container">
                <div id="home" class="weui-tab">
                    <div id="title" class="titlebar">
                        <h1 class="titlebar__title">灯效</h1>
                    </div>

                    <div id="panel1" class="weui-tab__panel">
                        <div class="weui-panel weui-panel_access">
                            <div class="weui-panel__hd">全局设置</div>
                            <div class="weui-panel__bd">
                                <div class="weui-media-box">
                                    <strong class="weui-media-box__title">亮度</strong>
                                    <div class="weui-media-box__desc">
                                        <input id="brightness" type="range" min="0" max="255" step="1" value="127" />
                                    </div>
                                    <strong class="weui-media-box__title">色温</strong>
                                    <div class="weui-media-box__desc">
                                        <input id="temperature" type="range" min="1000" max="20000" step="100" value="6600" />
                                    </div>
                                    <strong class="weui-media-box__title">刷新率</strong>
                                    <div class="weui-media-box__desc">
                                        <input id="refreshRate" type="number" min="1" max="400" step="1" value="60" />
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="weui-panel weui-panel_access">
                            <div class="weui-panel__hd">灯效设置</div>
                            <div class="weui-panel__bd">
                                <div class="weui-media-box">
                                    <strong class="weui-media-box__title">灯效选择</strong>
                                    <div class="weui-media-box__desc">
                                        <div id="mode" class="btn-group">
                                            <button id="constant" class="weui-btn weui-btn_mini weui-btn_primary weui-btn_disabled" disabled>静止</button>
                                            <button id="blink" class="weui-btn weui-btn_mini weui-btn_primary">闪烁</button>
                                            <button id="breath" class="weui-btn weui-btn_mini weui-btn_primary">呼吸</button>
                                            <button id="chase" class="weui-btn weui-btn_mini weui-btn_primary">跑马灯</button>
                                            <button id="rainbow" class="weui-btn weui-btn_mini weui-btn_primary">彩虹</button>
                                            <button id="stream" class="weui-btn weui-btn_mini weui-btn_primary">流光</button>
                                            <button id="animation" class="weui-btn weui-btn_mini weui-btn_primary">自定义动画</button>
                                            <button id="music" class="weui-btn weui-btn_mini weui-btn_primary">音乐律动</button>
                                            <!-- <button id="custom" class="weui-btn weui-btn_mini weui-btn_primary">上位机控制</button> -->
                                        </div>
                                    </div>
                                    <span class="mode-setting" mode="constant|blink|breath|chase">
                                        <strong class="weui-media-box__title">灯光颜色</strong>
                                        <div class="weui-media-box__desc">
                                            <div id="colorpicker" class="cp-custom"></div>
                                            <div class="cp-input">
                                                R: <input id="r" type="number" min="0" max="255" step="1" value="255" />
                                                G: <input id="g" type="number" min="0" max="255" step="1" value="255" />
                                                B: <input id="b" type="number" min="0" max="255" step="1" value="255" />
                                            </div>
                                        </div>
                                    </span>
                                    <span class="mode-setting" style="display: none;" mode="blink|breath|chase">
                                        <strong class="weui-media-box__title">持续时间</strong>
                                        <div class="weui-media-box__desc">
                                            <input id="lastTime" type="number" min="0.1" step="0.1" value="1.0" />
                                        </div>
                                    </span>
                                    <span class="mode-setting" style="display: none;" mode="blink|breath">
                                        <strong class="weui-media-box__title">间隔</strong>
                                        <div class="weui-media-box__desc">
                                            <input id="interval" type="number" min="0.1" step="0.1" value="1.0" />
                                        </div>
                                    </span>
                                    <span class="mode-setting" style="display: none;" mode="rainbow|stream">
                                        <strong class="weui-media-box__title">色度增加量</strong>
                                        <div class="weui-media-box__desc">
                                            <input id="delta" type="number" min="1" max="255" step="1" value="1" />
                                        </div>
                                    </span>
                                    <span class="mode-setting" style="display: none;" mode="animation">
                                        <strong class="weui-media-box__title">选择动画</strong>
                                        <div class="weui-media-box__desc">
                                            <select id="animName">
                                                <option value="" selected></option>
                                            </select>
                                        </div>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="panel2" class="weui-tab__panel" style="display: none;">
                        <div class="weui-cells__title">
                            <button id="upload" class="weui-btn weui-btn_mini weui-btn_primary">上传</button>
                            <button id="refresh" class="weui-btn weui-btn_mini weui-btn_default">刷新</button>
                            已用空间: <span id="space"></span>
                        </div>
                        <div id="files" class="weui-cells">
                            <!-- 文件列表 -->
                        </div>
                    </div>
                    <div id="panel3" class="weui-tab__panel" style="display: none;">
                        <div class="weui-cells__title">安全</div>
                        <div class="weui-cells">
                            <div class="weui-cell">
                                <span class="weui-cell__bd">授权功能尚未实现</span>
                                <span class="weui-cell__ft"></span>
                            </div>
                            <!-- 认证及修改密码 -->
                        </div>

                        <div class="weui-cells__title">WiFi</div>
                        <div class="weui-cells">
                            <a id="connect" class="weui-cell weui-cell_access" href="javascript:">
                                <span class="weui-cell__bd">连接 WiFi</span>
                                <span id="ssid" class="weui-cell__ft"></span>
                            </a>
                            <a id="disconnect" class="weui-cell weui-cell_access" href="javascript:">
                                <span class="weui-cell__bd">断开连接</span>
                                <span class="weui-cell__ft"></span>
                            </a>
                        </div>

                        <div class="weui-cells__title">杂项</div>
                        <div class="weui-cells">
                            <a id="change-name" class="weui-cell weui-cell_access" href="javascript:">
                                <span class="weui-cell__bd">设备名称</span>
                                <span id="name" class="weui-cell__ft"></span>
                            </a>
                            <a id="change-hostname" class="weui-cell weui-cell_access" href="javascript:">
                                <span class="weui-cell__bd">访问地址</span>
                                <span id="hostname" class="weui-cell__ft"></span>
                            </a>
                            <a id="upgrade" class="weui-cell weui-cell_access" href="javascript:">
                                <span class="weui-cell__bd">在线升级</span>
                                <span class="weui-cell__ft"></span>
                            </a>
                        </div>

                        <div class="weui-cells__title">关于</div>
                        <div class="weui-cells">
                            <div class="weui-cell">
                                <span class="weui-cell__bd">
                                    <span>RGB Light</span>
                                    <p class="weui-cell__desc">由 QingChenW 用 💖 制作</p>
                                </span>
                                <span class="weui-cell__ft"></span>
                            </div>
                            <div class="weui-cell">
                                <span class="weui-cell__bd">
                                    <span>型号</span>
                                    <p id="model" class="weui-cell__desc"></p>
                                </span>
                                <span class="weui-cell__ft"></span>
                            </div>
                            <div class="weui-cell">
                                <span class="weui-cell__bd">
                                    <span>版本</span>
                                    <p id="version" class="weui-cell__desc"></p>
                                </span>
                                <span class="weui-cell__ft"></span>
                            </div>
                            <div class="weui-cell">
                                <span class="weui-cell__bd">
                                    <span>SDK 版本</span>
                                    <p id="sdkversion" class="weui-cell__desc"></p>
                                </span>
                                <span class="weui-cell__ft"></span>
                            </div>
                            <a class="weui-cell weui-cell_access" href="https://github.com/DawningW/RGBLight" target="_blank">
                                <span class="weui-cell__bd">
                                    <span>前往 GitHub 仓库</span>
                                    <p class="weui-cell__desc">本项目以 GPLv3 协议在 GitHub 上开源</p>
                                </span>
                                <span class="weui-cell__ft"></span>
                            </a>
                            <a class="weui-cell weui-cell_access" href="https://github.com/DawningW/RGBLight" target="_blank">
                                <span class="weui-cell__bd">
                                    <span>开放源代码许可</span>
                                    <p class="weui-cell__desc">前往 GitHub 查看第三方库的开源许可</p>
                                </span>
                                <span class="weui-cell__ft"></span>
                            </a>
                        </div>
                    </div>

                    <div class="weui-tabbar">
                        <div id="tab1" class="weui-tabbar__item weui-bar__item_on">
                            <div class="weui-tabbar__icon">
                                <svg class="off" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6C7.8 12.16 7 10.63 7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z"/></svg>
                                <svg class="on" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M9 21c0 .5.4 1 1 1h4c.6 0 1-.5 1-1v-1H9v1zm3-19C8.1 2 5 5.1 5 9c0 2.4 1.2 4.5 3 5.7V17c0 .5.4 1 1 1h6c.6 0 1-.5 1-1v-2.3c1.8-1.3 3-3.4 3-5.7 0-3.9-3.1-7-7-7z"/></svg>
                            </div>
                            <p class="weui-tabbar__label">灯效</p>
                        </div>
                        <div id="tab2" class="weui-tabbar__item">
                            <div class="weui-tabbar__icon">
                                <svg class="off" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M9.17 6l2 2H20v10H4V6h5.17M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"/></svg>
                                <svg class="on" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"/></svg>
                            </div>
                            <p class="weui-tabbar__label">文件管理</p>
                        </div>
                        <div id="tab3" class="weui-tabbar__item">
                            <div class="weui-tabbar__icon">
                                <svg class="off" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19.43 12.98c.04-.32.07-.64.07-.98 0-.34-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.09-.16-.26-.25-.44-.25-.06 0-.12.01-.17.03l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.06-.02-.12-.03-.18-.03-.17 0-.34.09-.43.25l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98 0 .33.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.09.16.26.25.44.25.06 0 .12-.01.17-.03l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.06.02.12.03.18.03.17 0 .34-.09.43-.25l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zm-1.98-1.71c.04.31.05.52.05.73 0 .21-.02.43-.05.73l-.14 1.13.89.7 1.08.84-.7 1.21-1.27-.51-1.04-.42-.9.68c-.43.32-.84.56-1.25.73l-1.06.43-.16 1.13-.2 1.35h-1.4l-.19-1.35-.16-1.13-1.06-.43c-.43-.18-.83-.41-1.23-.71l-.91-.7-1.06.43-1.27.51-.7-1.21 1.08-.84.89-.7-.14-1.13c-.03-.31-.05-.54-.05-.74s.02-.43.05-.73l.14-1.13-.89-.7-1.08-.84.7-1.21 1.27.51 1.04.42.9-.68c.43-.32.84-.56 1.25-.73l1.06-.43.16-1.13.2-1.35h1.39l.19 1.35.16 1.13 1.06.43c.43.18.83.41 1.23.71l.91.7 1.06-.43 1.27-.51.7 1.21-1.07.85-.89.7.14 1.13zM12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"/></svg>
                                <svg class="on" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px"><g><path d="M0,0h24v24H0V0z" fill="none"/><path d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z"/></g></svg>
                            </div>
                            <p class="weui-tabbar__label">设置</p>
                        </div>
                    </div>
                </div>

                <button id="add-anim" class="floating-btn weui-btn weui-btn_primary floating-btn_round" style="visibility: hidden;" href="javascript:">+</button>

                <button id="console-open" class="floating-btn weui-btn weui-btn_mini weui-btn_primary">控制台</button>
                <div id="console" style="display: none;">
                    <div class="weui-mask"></div>
                    <div class="weui-half-screen-dialog weui-half-screen-dialog_large">
                        <div class="weui-half-screen-dialog__hd">
                            <div class="weui-half-screen-dialog__hd__side">
                                <button id="console-close" class="weui-btn_icon">关闭<i class="weui-icon-slide-down"></i></button>
                            </div>
                            <div class="weui-half-screen-dialog__hd__main">
                                <strong class="weui-half-screen-dialog__title">控制台</strong>
                            </div>
                        </div>
                        <div class="weui-half-screen-dialog__bd">
                            <textarea id="message" class="weui-textarea" readonly></textarea>
                            <div id="command-input">
                                <input id="command" class="weui-input" type="text" placeholder="请输入命令..." />
                                <button id="send" class="weui-btn weui-btn_mini weui-btn_primary">发送</button>
                            </div>
                        </div>
                    </div>
                </div>

                <div id="wifi" style="display: none;">
                    <div class="weui-mask"></div>
                    <div class="weui-half-screen-dialog">
                        <div class="weui-half-screen-dialog__hd">
                            <div class="weui-half-screen-dialog__hd__side">
                                <button id="wifi-close" class="weui-btn_icon">关闭<i class="weui-icon-close-thin"></i></button>
                            </div>
                            <div class="weui-half-screen-dialog__hd__main">
                                <strong class="weui-half-screen-dialog__title">连接 WiFi</strong>
                                <span class="weui-half-screen-dialog__subtitle">点按以连接至此 WiFi</span>
                            </div>
                        </div>
                        <div class="weui-half-screen-dialog__bd">
                            <div id="wifi-list" class="weui-cells">
                                <!-- WiFi 列表 -->
                            </div>
                        </div>
                    </div>
                </div>

                <div id="dialog" style="display: none;">
                    <div class="weui-mask"></div>
                    <div class="weui-dialog">
                        <div class="weui-dialog__hd">
                            <strong class="weui-dialog__title"></strong>
                        </div>
                        <div class="weui-dialog__bd"></div>
                        <div class="weui-dialog__ft">
                            <a class="weui-dialog__btn weui-dialog__btn_default" href="javascript:">取消</a>
                            <a class="weui-dialog__btn weui-dialog__btn_primary" href="javascript:">确定</a>
                        </div>
                    </div>
                </div>

                <div id="toast" style="display: none;">
                    <div class="weui-mask_transparent"></div>
                    <div class="weui-toast">
                        <i class="weui-icon_toast"></i>
                        <p class="weui-toast__content"></p>
                    </div>
                </div>

                <div id="infobar" class="weui-information-bar" style="display: none;">
                    <div class="weui-information-bar__hd">
                        <i id="infobar-icon" class="weui-icon-outlined-warn"></i>
                    </div>
                    <div class="weui-information-bar__bd"></div>
                    <div class="weui-information-bar__ft">
                        <button class="weui-btn_icon">关闭<i class="weui-icon-close-thin"></i></button>
                    </div>
                </div>
            </div>

            <div id="tip">
                <img id="qrcode" style="width: 150px; height: 150px;">
                <p>使用手机扫码访问此页面</p>
                <p>（需连接至同一 WiFi）</p>
            </div>
        </div>
    </body>
</html>
